<template>
	<div class="userinformation">
		<el-form label-width="80px">
		  <el-form-item label="用户名:">
		    <el-input v-model="nickname" placeholder="请输入昵称"></el-input>
		  </el-form-item>
		  
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		  <el-table
		    :data="tableData"
		    border
			fit
		    style="width: 100%">
		    <el-table-column
		      fixed
		      prop="date"
		      label="注册日期"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="sex"
		      label="性别"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="phone"
		      label="手机号"
			>
		    </el-table-column>
		    <el-table-column
		      prop="address"
		      label="地址"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="ID"
		      label="身份证号"
		    >
		    </el-table-column>
		    <el-table-column
		      fixed="right"
		      label="操作"
		    >
		      <template slot-scope="scope">
		        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
		        <el-button type="text" size="small">封禁</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
	</div>
</template>

<script>
	export default{
		name:"UserINformation",
		data(){
			return{
				nickname:"",
				 tableData: [
                    {
				          date: '2022-10-10',
				          name: '赵铁柱',
				          sex: '男',
				          phone: '13033333333',
				          address: '河北省石家庄市新华区泰华街林荫大院',
				          ID: '130111111111111111'
                    }, 
                    {
				          date: '2022-10-10',
				          name: '陈二狗',
				          sex: '男',
				          phone: '13033333333',
				          address: '河北省石家庄市新华区泰华街林荫大院',
				          ID: '130111111111111111'
                    },
                    {
				          date: '2022-10-10',
				          name: '刘兰花',
				          sex: '女',
				          phone: '13033333333',
				          address: '河北省石家庄市新华区泰华街林荫大院',
				          ID: '130111111111111111'
                    },
                    {
				          date: '2022-10-10',
				          name: '吴秀丽',
				          sex: '女',
				          phone: '13033333333',
				          address: '河北省石家庄市新华区泰华街林荫大院',
				          ID: '130111111111111111'
                    },
                    ]
			}
		},
		methods:{
			//查看
			handleClick(row) {
				console.log(row);
			},
			search(){
				console.log(this.nickname)
			}
		}
	}
</script>

<style scoped="scoped">
	.userinformation .el-form{
	  display: flex;
	  float: left;
	}
	.userinformation .el-button{
		margin-left: 15px;
	}
</style>
